<html>
  <head>
    <title>Reading List</title>
    <link rel="stylesheet" th:href="@{/style.css}"></link>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  </head>

  <body>
    <form method="POST" th:action="@{/logout}">
      <input type="submit" value="Logout" />
    </form>

    <h2><span th:text="${reader.fullname}">Name</span>'s Reading List</h2>
    <div th:unless="${#lists.isEmpty(books)}">
      <dl th:each="book : ${books}">
        <dt class="bookHeadline">
          <a th:href="'http://www.amazon.com/gp/product/' 
                      + ${book.isbn} + '/tag=' + ${amazonID}" 
             th:text="${book.title}">Title</a> by 
          <span th:text="${book.author}">Author</span>
          (ISBN: <span th:text="${book.isbn}">ISBN</span>)
        </dt>
        <dd class="bookDescription">
          <span th:if="${book.description}" 
                th:text="${book.description}">Description</span>
          <span th:if="${book.description eq null}">
                No description available</span>
        </dd>
      </dl>
    </div>
    <div th:if="${#lists.isEmpty(books)}">
      <p>You have no books in your book list</p>
    </div>

    
    <hr/>
    
    <h3>Add a book</h3>
    <form method="POST" th:action="@{/}">
      <label for="title">Title:</label>
        <input type="text" name="title" size="50"></input><br/>
      <label for="author">Author:</label>
        <input type="text" name="author" size="50"></input><br/>
      <label for="isbn">ISBN:</label>
        <input type="text" name="isbn" size="15"></input><br/>
      <label for="description">Description:</label><br/>
        <textarea name="description" cols="80" rows="5"></textarea><br/>
      <input type="submit"></input>
    </form>
    
  </body>
</html>